<template>
  <div>
    <swiper class="swiperBox"
            ref="mySwiper"
            :options="swiperOption"
            @slideChange="slideCage"
            @reachEnd="loadMore"
    >
      <swiper-slide v-for="(item,index) in datalist" :key="index">
        <myvideo ref="videoBox" :info="item"></myvideo>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import 'swiper/css/swiper.min.css';
import {swiper,swiperSlide} from 'vue-awesome-swiper'
import myvideo from '../components/myvideo'
export default {
  name: 'index',
  components:{ swiper,swiperSlide,myvideo },
  data () {
    return {
      datalist:[
        {id:1,title:"大卫上学去",video_url:'http://www4.yuantianjiaoyu.com/yzd_edu/video/2022/2/22/1645511132420658404.mp4'},
        {id:2,title:"笨拙的螃蟹",video_url:'http://www4.yuantianjiaoyu.com/yzd_edu/video/2022/2/22/1645512681827967734.mp4'},
      ],
      swiperOption:{
        direction:'vertical',
        autoplay:false,
      },
      lastIndex:0,
     /* info:{id:3,title:"菲菲生气了",video_url:'http://www4.yuantianjiaoyu.com/yzd_edu/video/2022/2/22/1645513296368683122.mp4'}, */
    }
  },
  methods:{
    slideCage(){ //视屏滑动操作
      let activeIndex = this.$refs.mySwiper.swiper.activeIndex;
      let lastVideo = this.$refs.videoBox[this.lastIndex];
      let currentVideo = this.$refs.videoBox[activeIndex];
      lastVideo.reloadVideo(); //重载上个视频
      var isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
      if(!isAppleDevice){ //如果不是在苹果设备上，则自动播放视频
         currentVideo.playVideo();
      }
      this.lastIndex = activeIndex;
    },
    loadMore(){ //逐个加载更多视频。使用该方式则不需要 init();
      // this.datalist.push(this.info);
    },
    getParams(){ //获取url中的参数信息
      var url = location.search; //获取url中"?"符后的字串
      var theRequest = new Object();
      var strs = [];
      if (url.indexOf("?") != -1) {
          let str = url.substr(1);
          strs = str.split("&");
          for (var i = 0; i < strs.length; i++) {
              theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
          }
      }
      return theRequest;
    },
    init(){ //一次性加载所有数据.使用该方式则不需要 “逐个加载更多视频”
      this.$nextTick(()=>{
        var cvideo = this.$refs.videoBox[0];
        cvideo.playVideo(); //自动播放视频
      })
    }
  },
  mounted() {
    this.init();
  },
}
</script>
<style scoped>
.swiperBox{
  width: 100%;
  height: 100vh;
}
</style>
